import { PageContainer, ScrollView, View } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";
import { useResetState, useSetState } from "ahooks";
import { useEffect, useState } from "react";

import ByCol from "@/components/ui/ByCol";
import ByRow from "@/components/ui/ByRow";
import Money from "@/components/app/Money";
import Card from "@/components/common/Card";
import Page from "@/components/common/Page";
import ByText from "@/components/ui/ByText";
import TabsTag from "@/components/app/TabsTag";
import PopupDetail from "./components/PopupDetail";
import TreeMenu from "@/packageProject/components/TreeMenu";

import useFetch from "@/hooks/useFetch";
import ApiBudget from "@/api/budget";
import ApiCrm from "@/api/crm";

import { IntentCustomerData } from "@/types/customer";
import UserItem from "@/components/app/UserItem";
import Moment from "@/components/app/Moment";


const tabList = [
  { label: "明细", value: false },
  { label: "变更项", value: true },
];

export default () => {
  const { params } = useRouter();
  const intentCustomerId = Number(params.intentCustomerId);



  const { data: customerDetail } = useFetch<{
    intentCustomer: IntentCustomerData;
  }>(ApiCrm.customerDetail, {
    defaultParams: [{ intentCustomerId }],
  });


  const [search, setSearch] = useSetState({
    isChangeDetail: false,
    intentCustomerId
  });

  const { data, run } = useFetch<any>(ApiBudget.getCustomerBudget, { manual: true });

  useEffect(() => {
    setIndex(0)
    run(search)
  }, [search.isChangeDetail])


  const [index, setIndex] = useState(0);
  const { masterList = [] } = data || {};
  const detailList = masterList[index]?.details || [];

  const [selected, setSelected, reset] = useResetState(undefined);

  return (
    <>
      <Page
        skyline
        footerStyle={false}
        slotHeader={
          <>
            <View className="bg-white rounded-b-xl shadow-black-1 mb-2 p-3">
              <ByRow>
                <ByCol span={"auto"}>
                  <ByText>{customerDetail?.intentCustomer.customerName}</ByText>
                  <ByText size="sm" type="third">
                    {customerDetail?.intentCustomer.decorationFullAddress}
                  </ByText>
                </ByCol>

                <ByCol span={"none"} className="text-center">
                  <Money block type="primary" value={data?.budgetAmount} />
                  <ByText size="sm" type="second" className="mr-3">
                    预算总金额
                  </ByText>
                </ByCol>
              </ByRow>
            </View>

            <View className="py-2 px-3">
              <TabsTag
                mode="auto"
                items={tabList}
                active={search.isChangeDetail}
                onChange={(isChangeDetail) => setSearch({ isChangeDetail })}
              />
            </View>
          </>
        }
      >

        <ByRow className="h-full">
          <ByCol span={3}>
            <ScrollView className="h-full" scrollY>
              <TreeMenu
                active={index}
                list={masterList}
                renderItem={(item) => (
                  <View className="py-2">
                    <ByText block className="mb-2">{item.masterName}</ByText>
                    <Money value={item.ysCompreMoney} />
                  </View>
                )}
                onClick={setIndex}
              />
            </ScrollView>
          </ByCol>
          <ByCol span={9} className="p-2">
            <ScrollView className="h-full" scrollY>
              {detailList?.map((item) => (
                search.isChangeDetail ?
                  <Card className="m-3" onClick={() => Taro.navigateTo({ url: `changeDetail?budgetDetailId=${item.budgetDetailId}` })}>
                    <ByRow content="between">
                      <ByText type="second" size="sm">
                        {item.sourceName}
                      </ByText>
                      <ByText type="second" size="sm">
                        {item.area}
                      </ByText>
                    </ByRow>

                    <View className="flex items-center my-3">
                      <Money value={item.jsCompreMoney} type="primary" />
                      {/* <ByIcon name="ToRight" className="rotate-" />
                      <Money value={1234567} type="third" /> */}
                    </View>

                    <ByRow content="between" align="center">
                      <UserItem name={item.createUserName} />
                      <Moment value={item.createDate} />
                    </ByRow>
                  </Card> :
                  <Card
                    className="mb-3"
                    key={item.budgetDetailId}
                    onClick={() => setSelected(item)}
                  >
                    <ByText block size="sm" type="second">
                      {item.sourceName}
                    </ByText>
                    <Money className="mt-3" value={item.jsCompreMoney} />
                  </Card>
              ))}
            </ScrollView>
          </ByCol>
        </ByRow>

      </Page>

      <PageContainer round show={!!selected} onAfterLeave={reset}>
        {selected && <PopupDetail source={selected} onCancel={reset} />}
      </PageContainer>
    </>
  );
};
